<template>
  <div class="p-8">
    <!-- 学生头像和基本信息卡片 -->
    <el-card class="rounded-3xl shadow-md mb-8" v-loading="loading">
      <!-- 内层布局，包含头像和文本信息 -->
      <div class="flex">
        <!-- 学生头像，设置为圆形和固定大小 -->
        <img
          alt="Avatar"
          class="rounded-full w-24 h-24"
          src="@/assets/touxiang.jpg"
        />
        <!-- 学生信息，使用flex布局 -->
        <div class="ml-8 w-full flex-1">
          <!-- 姓名和学号信息行 -->
          <div class="flex w-full mb-4">
            <div class="w-1/2 flex">
              <div class="text-gray-500 w-20">学生姓名：</div>
              <div>{{ studentInfoReadOnly.sName }}</div>
            </div>
            <div class="w-1/2 flex">
              <div class="text-gray-500 w-20">学生学号：</div>
              <span>{{ studentInfoReadOnly.sId }}</span>
            </div>
          </div>
          <!-- 性别和手机号码信息行 -->
          <div class="flex w-full mb-4">
            <!-- 性别显示，通过getSexLabel方法转换性别代码为文本 -->
            <div class="w-1/2 flex">
              <div class="text-gray-500 w-20">性 别：</div>
              <span>{{ getSexLabel(studentInfoReadOnly.sSex) }}</span>
            </div>
            <div class="w-1/2 flex">
              <div class="text-gray-500 w-20">手机号码：</div>
              <div>{{ studentInfoReadOnly.stel }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="rounded-3xl shadow-md mb-8" v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>基本信息</span>
        </div>
      </template>
      <div class="flex gap-4 mb-4">
        <div class="flex flex-col gap-2 w-1/2">
          <label class="flex-none">证件类型</label>
          <el-select v-model="studentInfo.sNumtype" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="flex flex-col gap-2 w-1/2">
          <label class="flex-none">证件号码</label>
          <el-input
            v-model="studentInfo.sNumber"
            :suffix-icon="User"
            clearable
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="flex gap-4 mb-4">
        <div class="flex flex-col gap-2 w-1/2">
          <label class="flex-none">出生日期</label>
          <el-date-picker
              class="w-full"
              v-model="studentInfo.sBirth"
              type="date"
              placeholder="Pick a day"
              :disabled-date="disabledDate"
          />
        </div>
        <div class="flex flex-col gap-2 w-1/2">
          <label class="flex-none">手机号码</label>
          <el-input
            v-model="studentInfo.stel"
            :suffix-icon="Iphone"
            clearable
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="flex gap-4 mb-4">
        <div class="flex flex-col gap-2 w-full">
          <label class="flex-none">家庭住址</label>
          <el-input
            v-model="studentInfo.sAddress"
            :suffix-icon="Location"
            clearable
            placeholder="请输入"
            type="textarea"
          />
        </div>
      </div>
      <template #footer>
        <div class="card-footer flex justify-end">
          <el-button size="large" type="primary" @click="submit"
            >提交修改申请</el-button
          >
        </div>
      </template>
    </el-card>
    <el-card class="rounded-3xl shadow-md mb-8" v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>学籍信息</span>
        </div>
      </template>
      <div class="flex gap-4 mb-4">
        <div class="flex flex-col gap-2 w-1/2">
          <label class="flex-none">学生学号</label>
          <el-input v-model="studentInfo.sId" clearable disabled />
        </div>
        <div class="flex flex-col gap-2 w-1/2">
          <label class="flex-none">专业名称</label>
          <el-input v-model="studentInfo.sMajor" clearable disabled />
        </div>
      </div>
      <div class="flex gap-4 mb-4">
        <div class="flex flex-col gap-2 w-1/2">
          <label class="flex-none">班级</label>
          <el-input v-model="studentInfo.sClass" clearable disabled />
        </div>
        <div class="flex flex-col gap-2 w-1/2">
          <label class="flex-none">宿舍号</label>
          <el-input v-model="studentInfo.dNumber" clearable disabled />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
// 导入Vue的响应式引用和生命周期钩子
import { onMounted, ref } from "vue";
import { Calendar, Location, User, Iphone } from "@element-plus/icons-vue";
import { ApiUser } from "@/core/api/index.js";
// 导入SweetAlert2弹窗库
import Swal from "sweetalert2";
import { formatToLocalTime } from "@/core/utils/dateFormat.js";
// 定义只读的学生信息响应式引用
const studentInfoReadOnly = ref({});
// 定义可编辑的学生信息响应式引用
const studentInfo = ref({});
// 定义加载状态响应式引用
const loading = ref(false);

const options = [
  {
    value: "居民身份证",
    label: "居民身份证",
  },
  {
    value: "港澳台通行证",
    label: "港澳台通行证",
  },
];

// 根据性别代码返回性别标签的函数
const getSexLabel = (sex) => {
  switch (sex) {
    case "M":
      return "男";
    case "F":
      return "女";
    default:
      return "未知";
  }
};

const disabledDate = (time) => {
  return time.getTime() > Date.now();
};


// 获取学生信息的异步函数
const getStudentInfo = async () => {
  // 显示加载状态
  loading.value = true;
  // 调用API获取学生信息
  const response = await ApiUser.getStudentInfo();
  if (response.code == 0) {
    // 如果请求成功，更新只读和可编辑的学生信息
    studentInfoReadOnly.value = Object.assign(
      studentInfoReadOnly.value,
      response.data
    );
    studentInfo.value = Object.assign(studentInfo.value, response.data);
  }
  // 隐藏加载状态
  loading.value = false;
};
// 提交修改信息的异步函数
const submit = async () => {
  const response = await ApiUser.submitStudentInfo({
    dNumber: studentInfo.value.dNumber,
    rNumber: studentInfo.value.rNumber,
    sAddress: studentInfo.value.sAddress,
    sBirth: studentInfo.value.sBirth,
    sClass: studentInfo.value.sClass,
    sId: studentInfo.value.sId,
    sMajor: studentInfo.value.sMajor,
    sName: studentInfo.value.sName,
    sNumber: studentInfo.value.sNumber,
    sNumtype: studentInfo.value.sNumtype,
    sPassword: studentInfo.value.sPassword,
    sSex: studentInfo.value.sSex,
    sTel: studentInfo.value.stel,
  });
  if (response.code == 0) {
     // 如果提交成功，显示成功提示，并重新获取学生信息
    Swal.fire({
      title: "成功编辑信息",
      text: `您已成功编辑了您的信息！`,
      icon: "success",
    });
    getStudentInfo();
  }
};
// 在组件挂载后立即执行getStudentInfo函数
onMounted(() => {
  getStudentInfo();
});
</script>
